<template>
  <div class="wl-container">
    <div class="wl-img-container">
      <div class="wl-img-heard">
        <!-- <img src="@../assets/logo.png" alt /> -->
      </div>
      <div class="wl-img-box" style="width: 100%;"></div>
    </div>

    <div class="wl-content">
      <div class="box">
        <div class="login">
          <div style="width: 100%;margin-left: 28px;">
            <div class="login-tabs">
              <h3>手机端登录</h3>
            </div>
            <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="0">
              <FormItem label prop="username">
                <Input type="text" v-model="formCustom.username" placeholder="请输入账号"/>
              </FormItem>
              <FormItem label prop="password">
                <div class="flex_h">
                  <Input type="password" password v-model="formCustom.password" placeholder="请输入密码"
                         @keyup.enter.native="handleSubmit('formCustom')"/>
                </div>
              </FormItem>
              <FormItem>
                <Button class="wl-btn" type="primary" @click="handleSubmit('formCustom')">登录</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    const validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    const validatephone_code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      formCustom: {
        username: '',
        password: ''
      },
      ruleCustom: {
        username: [{
          validator: validateAccount,
          trigger: 'blur'
        }],
        password: [{
          validator: validatephone_code,
          trigger: 'blur'
        }]
      }
    }
  },

  mounted () {
    // this.tuichu()
  },

  methods: {
    tuichu () {
      this.axios.post('../login/logout').then(res => {
        if (res.code == 1) {

        }
      })
    },
    tabs (name) {
      this.$refs[name].resetFields()
    },

    getRole (role_id) {
      this.axios.post('role/get_role_rule', { role_id: role_id }).then(res => {
        if (res.code == 1) {
          var arr = []
          arr = res.data
          if (arr[0] == '') {
            this.astgo.setItem(this.Pn + 'info_role', JSON.stringify([]))
          } else {
            this.astgo.setItem(this.Pn + 'info_role', JSON.stringify(res.data))
          }

          console.log(this.astgo.getItem('ys_prj_info_role'))

          this.$Message.success('登录成功!')
          this.$router.push('/')
        }
      })
    },

    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          const url = 'login/login'
          this.axios.post(url, this.formCustom).then(res => {
            alert(res)
            this.$Message.success(res)
            console.log(res)
            if (res.code === 1) {
              this.astgo.setItem(this.Pn + 'info', JSON.stringify(res.data))
              console.log('role', res.data)
              this.astgo.setItem(this.Pn + 'roleId', String(res.data.role_id))
              // console.log( JSON.parse(this.astgo.getItem(this.Pn + "info")) )

              // this.getRole(res.data.role_id)
              this.$Message.success('登录成功!')
              this.$router.push('/')
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.flex_h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex_h .ivu-input-wrapper .ivu-input {
  border-radius: 4px 0 0 4px;
}

.codeImg {
  color: #808695;
  width: 110px;
  height: 32px;
  cursor: pointer;
  border: 1px solid #dcdee2;
  border-left: 0;
  text-align: center;
}

.ivu-tabs-bar {
  /* border-bottom: 0px !important; */
  margin-bottom: 1px !important;
}

.ivu-tabs-nav .ivu-tabs-tab-active {
  color: #EE217E;
}

.ivu-tabs-ink-bar {
  background: #EE217E;
}

.ivu-tabs-nav .ivu-tabs-tab:hover {
  color: #EE217E;
}

.ivu-tabs-nav-wrap {
  text-align: center;
}

.ivu-tabs-nav-scroll {
  display: inline-block;
}

.ivu-tabs {
  width: 100%;
}
</style>
<style lang="scss" scoped>
.wl-container {
  width: 100%;
  height: 100%;
}

.wl-img-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

.wl-img-heard {
  width: 1024px;
  // height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.wl-img-heard img {
  display: block;
  height: 40px;
}

.wl-img-box {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/BG.jpg);
  box-sizing: 100% 100%;
}

.wl-content {
  width: 1024px;
  height: 100%;
  margin: 0 auto;
  z-index: 2000;
  // position: relative;
}

.box {
  // width: 850px;
  // height: 424px;
  padding-bottom: 30px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.box .box-xuanchuan {
  width: 476px;
  height: 100%;
  float: left;
  border-right: 5px solid #eeeeee;
  position: relative;
}

.box .box-xuanchuan img {
  width: 410px;
  height: 230px;
  border-radius: 4px;
  position: absolute;
  top: calc(50% - 115px);
  left: calc(50% - 205px);
}

.box .login {
  width: 367px;
  height: 100%;
  float: left;
}

.login .login-tabs {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 20px;
  // border-bottom: 2px solid #eeeeee;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.login-tabs .el-tabs {
  width: 310px;
  height: 60px;
}

.login-tabs .el-tabs .el-tabs__nav {
  width: 100%;
}

.login-tabs .el-tabs__nav .el-tabs__item {
  width: 103px;
  text-align: center;
  height: 58px;
  line-height: 58px;
}

.login-tabs .el-tabs__nav .el-tabs__active-bar {
  width: 103px;
}

.ivu-form {
  width: 310px;
  margin-top: 24px;
}

.ivu-input-wrapper .ivu-input {
  border-radius: 0;
}

.login .login-text {
  width: 300px;
  height: 80px;
  font-size: 14px;
  color: #333;
  border-top: 2px solid #eee;
  font-weight: 500px;
  line-height: 80px;
}

.wl-btn {
  width: 100%;
}

.ivu-btn-primary {
  background-color: #e3031f;
  border-color: #e3031f;
}
</style>
